<template>
    <div>
        <div style="display: flex; justify-content: center; align-items: center;">
            <el-form :inline="true" :model="formInline" label-width="100px">
              <el-form-item label="调拨单号">
                <el-input v-model="formInline.Number" placeholder="请输入" style="width: 150px;"></el-input>
              </el-form-item>
              <el-form-item label="单据状态">
                <el-select v-model="formInline.Status" placeholder="请选择" style="width: 150px;">
                  <el-option label="未审核" value="未审核"></el-option>
                  <el-option label="已审核" value="已审核"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="调拨申请日">
                <el-date-picker v-model="formInline.date" type="date" placeholder="选择日期" style="width: 120px;"></el-date-picker>
                至
                <el-date-picker v-model="formInline.date1" type="date" placeholder="选择日期" style="width: 120px;"></el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="searchData">查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button  @click="chongzhi">重置</el-button>
              </el-form-item>
            </el-form>
          </div >


          <div style="display: flex;">
            <div style="width: 90px;">
              <el-button type="primary" @click="handleAdd">新增</el-button>
            </div>
            <div style="width: 90px;">
              <el-button type="primary" @click="handleShen">审核</el-button>
            </div>
            <div style="width: 90px;">
              <el-button type="primary" @click="handleDel">删除</el-button>
            </div>
          </div>
          <div style="overflow-x: auto;">
            <el-table :data="data" style="width: 100%" class="dataTable" @selection-change="handleSelectionChangeDel">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="ka_kaid" label="序号"></el-table-column>
              <el-table-column prop="ka_number" label="调拨单号"></el-table-column>
              <el-table-column prop="ka_status" label="单据状态">
                <template slot-scope="scope">
                  <span :style="{ color: getStatusColor(scope.row.ka_status) }">
                    {{ scope.row.ka_status }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="调拨申请日期">
                <template slot-scope='scope'>
                  <span>{{ filterTime(scope.row.ka_filing_date) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="ka_type" label="调拨类型"></el-table-column>
              <el-table-column prop="ka_callout" label="调出仓库"></el-table-column>
              <el-table-column prop="ka_fold" label="调入仓库"></el-table-column>
              <el-table-column prop="ka_quantity" label="调拨数量"></el-table-column>
              <el-table-column prop="ka_money" label="调拨金额"></el-table-column>
              <el-table-column prop="ka_operator" label="经办人"></el-table-column>
              <el-table-column label="调拨货品" prop="ka_goods"></el-table-column>
              <el-table-column prop="ka_creator" label="制单人"></el-table-column>
              <el-table-column prop="ka_dpum" label="所在部门"></el-table-column>
              <el-table-column label="制单时间">
                <template slot-scope='scope'>
                  <span>{{ filterTime(scope.row.ka_documentpreparationtime) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="ka_auditor" label="审核人"></el-table-column>
              <el-table-column label="审核时间">
                <template slot-scope='scope'>
                  <span>{{ filterTime(scope.row.ka_auditrtime) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="ka_Ramer" label="备注"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <!-- <el-button @click="DbUpd(scope.row)" type="text">编辑</el-button> -->
                  <el-button 
                  @click="DbUpd(scope.row)" 
                  type="text"
                  :disabled="scope.row.ka_status === '已审核'" 
                >
                  编辑
                </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          
              <el-pagination v-on:size-change="handleSizeChange"
              v-on:current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="rows">
  </el-pagination>
  


  <el-dialog
title="调拨新增"
:visible.sync="dbxz"
:size="'auto'"
>
<h3>基础信息</h3>
<el-form ref="AddForm" :model="AddForm" :rules="rules" label-width="100px" >
<el-row>
  <el-col :span="12">
    <el-form-item label="调拨单号">
      <el-input v-model="AddForm.xindex" placeholder="自动获取系统编号" style="width: 200px;" disabled readonly/>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="调拨申请日期"  prop="xdate">
      <el-date-picker style="width: 200px;"
        v-model="AddForm.xdate"
        type="date"
        format="yyyy-MM-dd"
        placeholder="请选择日期">
      </el-date-picker>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="调拨类型" prop="Status">
      <el-select v-model="AddForm.Status" placeholder="请选择" style="width: 150px;">
        <el-option label="货品调拨" value="货品调拨"></el-option>
        <el-option label="其他调拨" value="其他调拨"></el-option>
      </el-select>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="调入仓库" prop="drck">
      <el-select v-model="AddForm.drck" placeholder="请选择" style="width: 200px;">
        <el-option
          v-for="option in Cklsit"
          :key="option.w_wid"
          :label="option.w_wname"
          :value="option.w_wid">
        </el-option> 
      </el-select>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="调出仓库" prop="dcck">
      <el-select v-model="AddForm.dcck" placeholder="请选择" style="width: 200px;">
        <el-option
          v-for="option in Cklsit"
          :key="option.w_wid"
          :label="option.w_wname"
          :value="option.w_wid">
        </el-option> 
      </el-select>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="经办人" prop="xjbr">
      <el-input v-model="AddForm.xjbr" placeholder="请输入"/>
    </el-form-item>
  </el-col>
  <el-col :span="24">
    <el-form-item label="备注">
      <el-input v-model="AddForm.xbez" placeholder="请输入"/>
    </el-form-item>
  </el-col>
</el-row>
</el-form>
<h3>调拨明细</h3>
<div style="width: 70px;">
  <!-- 添加按钮 -->
  <el-button type="primary" @click="MxAdd" style="font-size: 10px;">添加</el-button>
</div>


<div style="overflow-x: auto;">
  <el-table :data="dbmxdata" style="width: 100%" class="dataTable">
    <el-table-column prop="ad_adid" label="序号"  ></el-table-column>
    <el-table-column prop="ad_product_name" label="货品名称"></el-table-column>
    <el-table-column prop="ad_product_number" label="货品编号"></el-table-column>
    <el-table-column prop="ad_specifications_models" label="规格型号"></el-table-column>
    <el-table-column prop="ad_unit" label="单位"></el-table-column>
    <el-table-column prop="ad_typeofgoods" label="货品类型"></el-table-column>
    <el-table-column prop="ad_fold_fold" label="当前库存"></el-table-column>
    <el-table-column label="调拨数量">
      <template slot-scope="scope">
        <el-input v-model="scope.row.ad_quantity" placeholder="请输入" @blur="checkQuantity(scope.row)"></el-input>
      </template>
    </el-table-column>
    <el-table-column  label="入库单价">
      <template slot-scope="scope">
        <el-input v-model="scope.row.ad_receipt_unitprice" placeholder="请输入"></el-input>
      </template>
    </el-table-column>
    <el-table-column  label="调拨金额">
      <template slot-scope="scope">
        {{ (scope.row.ad_quantity || 0) * (scope.row.ad_receipt_unitprice || 0) }}
      </template>
    </el-table-column>
    <el-table-column  label="备注">
      <template slot-scope="scope">
        <el-input v-model="scope.row.ad_remark" placeholder="请输入"></el-input>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button @click="showDispose(scope.row)" type="text">移除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div>
  合计&nbsp;&nbsp;&nbsp;调拨总数量：{{ totalQuantity }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;调拨总金额：{{ totalAmount }}
  </div>
</div>
<h3>上传附件</h3>
<div>  
  <el-upload
  class="upload-demo"
  :action="getUploadUrl()"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-upload="beforeUpload"
  multiple
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过200MB</div>
</el-upload>
</div>  
<span slot="footer" class="dialog-footer">
  <el-button @click="cancel">取消</el-button>
  <el-button @click="saveData">保存</el-button>
  
</span>
</el-dialog>

<el-dialog
title="添加货品"
:visible.sync="tjhp"
:size="'auto'"
>
<div style="overflow-x: auto;">
<el-table ref="tableName" :data="rkdata" style="width: 100%" class="dataTable" @selection-change="handleSelectionChange">
  <el-table-column type="selection" width="55"></el-table-column>
  <el-table-column prop="i_IIndex" label="序号"></el-table-column>
  <el-table-column prop="i_IProductName" label="货品名称"></el-table-column>
  <el-table-column prop="i_IProductCode" label="货品编号"></el-table-column>
  <el-table-column prop="i_IModel" label="规格型号"></el-table-column>
  <el-table-column prop="i_IUnit" label="单位"></el-table-column>
  <el-table-column prop="i_IUnitPrice" label="入库单价"></el-table-column>
  <el-table-column prop="i_IQuantity" label="调出仓库库存"></el-table-column>
</el-table>
<span slot="footer" class="dialog-footer">
  <el-button @click="tjhp = false">取消</el-button>
  <el-button @click="hpForm">确认</el-button>
</span>  
</div>
</el-dialog>

<el-dialog
title="审核"
:visible.sync="shenhe"
:size="'auto'"
>

<el-form ref="ShenForm" :model="ShenForm" label-width="100px" >
<el-row>
  <el-col :span="12">
    <el-form-item label="编号" v-if="!isHidden">
      <el-input v-model="ShenForm.bh1" placeholder="请输入" style="width: 200px;" />
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="审核结果">
      <el-radio-group v-model="ShenForm.jieguo">
        <el-radio label="通过">通过</el-radio>
        <el-radio label="驳回">驳回</el-radio>
      </el-radio-group>
    </el-form-item>
  </el-col>
 
  <el-col :span="24">
    <el-form-item label="审核意见">
      <el-input v-model="ShenForm.yijian" placeholder="请输入"/>
    </el-form-item>
  </el-col>
</el-row>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="shenhe= false">取消</el-button>
    <el-button @click="ShenData">确认</el-button>
    
  </span>
</el-dialog>


<el-dialog
title="调拨修改"
:visible.sync="xgxz"
:size="'auto'"
>
<h3>基础信息</h3>
<el-form ref="UpdForm" :model="UpdForm" label-width="100px" >
<el-row>
  <el-col :span="12">
    <el-form-item label="编号">
      <el-input v-model="UpdForm.xindex1" placeholder="请输入" style="width: 200px;" />
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="调拨申请日期">
      <el-date-picker style="width: 200px;"
        v-model="UpdForm.xdate1"
        type="date"
        format="yyyy-MM-dd"
        placeholder="请选择日期">
      </el-date-picker>
    </el-form-item>
  </el-col>
 
  <el-col :span="12">
    <el-form-item label="调拨类型">
      <el-select v-model="UpdForm.Status1" placeholder="请选择" style="width: 150px;">
        <el-option label="货品调拨" value="货品调拨"></el-option>
        <el-option label="其他调拨" value="其他调拨"></el-option>
      </el-select>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="调入仓库">
      <el-select v-model="UpdForm.drck1" placeholder="请选择" style="width: 200px;">
        <el-option
          v-for="option in Cklsit"
          :key="option.w_wid"
          :label="option.w_wname"
          :value="option.w_wid">
        </el-option> 
      </el-select>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="调出仓库">
      <el-select v-model="UpdForm.dcck1" placeholder="请选择" style="width: 200px;">
        <el-option
          v-for="option in Cklsit"
          :key="option.w_wid"
          :label="option.w_wname"
          :value="option.w_wid">
        </el-option> 
      </el-select>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="经办人">
      <el-input v-model="UpdForm.xjbr1" placeholder="请输入"/>
    </el-form-item>
  </el-col>
  <el-col :span="24">
    <el-form-item label="备注">
      <el-input v-model="UpdForm.xbez1" placeholder="请输入"/>
    </el-form-item>
  </el-col>
</el-row>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="xgxz = false">取消</el-button>
    <el-button @click="xgsaveData">保存</el-button>
    
  </span>
</el-dialog>
    </div>
</template>

<script>
import $http from '../router/base.js';
import { MessageBox } from 'element-ui';
export default {
    data() {
        return {
          xgxz:false,
          isHidden: true, // 控制文本框显示与隐藏的变量
          shenhe:false,
          ShenForm:{
        bh1:'',
        jieguo:'',
        yijian:''
      },
          dbmxdata:[],
          rkdata:[],
          tjhp:false,//添加货品
          fileList:[],//文件上传显示
          Cklsit:[],
          dbxz:false,//调拨新增的模态框
          AddForm:{
        xindex:'',
        xdate:'',
       Status:'',
       drck:'',
       dcck:'',
       xjbr:'',
        xbez:''
      },
      UpdForm:{
        xindex1:'',
        xdate1:'',
       Status1:'',
       drck1:'',
       dcck1:'',
       xjbr1:'',
        xbez1:''
      },
          data: [], 
            currentPage: 1,
      pageSize: 10,
      rows: 0, // 数据总条数
          formInline: {
          Number: '',
          Status: '',
          date:'',
          date1:'',
      },


      rules: {
  
        xdate: [
    { required: true, message: '请选择日期', trigger: 'blur' },
  ],
  Status: [
    { required: true, message: '请选择类型', trigger: 'blur' },
  ],
  drck: [
    { required: true, message: '请选择仓库', trigger: 'blur' },
  ],
  dcck: [
    { required: true, message: '请选择仓库', trigger: 'blur' },
  ],
  xjbr: [
    { required: true, message: '请选择经办人', trigger: 'blur' },
  ],
 

},
     selectedRows: [], // 选中的行数据
     // 定义状态对应的颜色映射关系
     orderNumber:'',
        }
    },
    methods:{
      getStatusColor(status) {
      const statusColorMap = {
        '已审核': 'green',
        '未审核': 'red',
    
      };
      return statusColorMap[status];
    },
    generateCode() {
      // 生成随机大写字母
      const randomLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));

      // 生成当前日期
      const currentDate = new Date().toISOString().slice(0, 10).replace(/-/g, '');

      // 生成4个随机数字
      const randomDigits = Math.floor(1000 + Math.random() * 9000);

      // 组合成编号
      return randomLetter + currentDate + randomDigits;
    },
      xgsaveData(){//修改保存
        const cck1=this.UpdForm.dcck1.toString();
        const rck1=this.UpdForm.drck1.toString();
        $http.put("api/Syskcallot/DbUpd", {
          ka_kaid: this.UpdForm.xindex1,
          ka_filing_date: this.UpdForm.xdate1,
          ka_type: this.UpdForm.Status1,
          ka_fold:rck1,
          ka_callout:cck1,
          ka_operator:this.UpdForm.xjbr1,
          ka_Ramer:this.UpdForm.xbez1
}).then(res => {
  if (res) {
    this.$message({
      message: '修改成功！',
      type: 'success'
    });

    this.xgxz = false;
    this.searchData(); // 重新填充销售机会列表
  }
})
.catch(err => {
  this.$message({
    message: '修改失败！',
    type: 'error'
  });
});
      },
      DbUpd(row){//修改调用模态框
        this.xgxz=true;
        this.Ckqu();
        this.UpdForm.xindex1=row.ka_kaid;
        this.UpdForm.xdate1=row.ka_filing_date;
        this.UpdForm.Status1=row.ka_type;
        this.UpdForm.drck1=row.ka_fold;
        this.UpdForm.dcck1=row.ka_callout;
        this.UpdForm.xjbr1=row.ka_operator;
        this.UpdForm.xbez1=row.ka_Ramer;
      },
      //批量删除
  handleDel() {
    const hasUnstoredData = this.selectedRows.some(row => row.ka_status === '已审核' );
  if (!hasUnstoredData) {
    MessageBox.confirm('存在未入库的数据，确定删除所选单据？', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // 执行删除操作的逻辑
      $http.delete('api/Syskcallot/DbDel', {
        data: this.selectedIds
      })
      .then(response => {
        this.$message({
          message: '删除成功！',
          type: 'success'
        });
        this.Qu();
        this.searchData();
      })
      .catch(error => {
        this.$message({
          message: '删除失败！',
          type: 'error'
        });
      });
    }).catch(() => {
      // 用户点击取消按钮时执行的操作，这里不需要执行任何操作
    });
  } else {
    this.$message.warning('无法删除已审核的数据');
  }
  },
       //调拨审核
       ShenData(){
      $http.put(`api/Syskcallot/DbShen?to=${this.ShenForm.jieguo}`, {
        ka_kaid: this.ShenForm.bh1.toString(),
        ka_Reviewcomments: this.ShenForm.yijian.toString(),
       
}).then(res => {
  if (res) {
    this.$message({
      message: '审核成功！',
      type: 'success'
    });

    this.shenhe = false;
    this.searchData(); // 重新填充销售机会列表
  }
})
.catch(err => {
  this.$message({
    message: '审核失败！',
    type: 'error'
  });
});

    },
      handleShen(){//审核模态框
        this.shenhe=true;
        this.ShenForm.bh1=this.selectedPOIndex;
      },
       // 处理复选框选中事件
    handleSelectionChangeDel(selection) {
this.selectedIds = selection.map(item => item.ka_kaid);
if (selection && selection.length > 0) {
      const selectedRow = selection[0]; // 获取选中的第一行数据
      this.selectedPOIndex = selectedRow.ka_kaid; // 获取选中行的编号
    } else {
      this.selectedPOIndex = ''; // 如果没有选中行，则清空选中行的编号
    }
    this.selectedRows = selection;//无法删除已审核的数据
     console.log(this.selectedIds);
     console.log( this.selectedPOIndex);
},
      saveData(){//保存，调拨表和调拨明细表的数据
        this.$refs.AddForm.validate((valid) => {
    if (valid) {
        // 生成编号
 this.orderNumber = this.generateCode();
        this.saveForm();
        this.savea();

        this.dbxz=false;
        this.searchData();
        this.Qu();
    } else {
      // 表单验证失败，可以在这里进行相应的提示或处理
    }
  });
        
      },

      saveForm() {//调拨表的添加
const cck=this.AddForm.dcck.toString();
const rck=this.AddForm.drck.toString();

$http.post("api/Syskcallot/Add", {
  ka_number: this.orderNumber,
  ka_status: '未审核',
  ka_filing_date: this.AddForm.xdate,
  ka_type:this.AddForm.Status,
  ka_callout: cck,
  ka_fold: rck,
  ka_quantity: this.totalQuantity,
  ka_money:this.totalAmount,
  ka_operator: this.AddForm.xjbr,
  ka_goods: this.concatenatedProductNames,
  ka_creator: 'admin',
  ka_dpum: '仓储部',
  ka_documentpreparationtime: new Date(),
  ka_auditor: null,
  ka_auditrtime: null, // 使用正确的日期变量
  ka_createtime: null, 
  ka_createuser: null, 
  ka_updateuser: null,
  ka_updatetime:null,
  ka_Ramer:this.AddForm.xbez,
  ka_Reviewcomments:null
})
.then(res => {
  if (res) { // 注意这里应该判断 res.data 而不是 res
    this.$message({
      message: '添加成功！',
      type: 'success'
    });
    this.Qu();
        this.searchData();
  } else {
    this.$message({
      message: '添加失败！',
      type: 'error' // 应该是 error 类型
    });
  }
})
.catch(error => {
  console.error('请求失败:', error);
  this.$message.error('请求失败，请稍后重试！');
});
},
      checkQuantity(row) {
    // 获取当前库存
    const quantity = row.ad_fold_fold;
    // 获取本次调拨数量
    const inputQuantity = row.ad_quantity;

    // 如果本次入库数量大于进货数量，则提示错误并将输入框置空
    if (inputQuantity > quantity) {
      this.$message.error('本次调拨数量不能大于当前库存');
      row.ad_quantity = '';
    }
  },
 //调拨明细表的添加
 savea() { 
const promises = this.dbmxdata.map(row => {
  const postData = {
    ad_product_name: row.ad_product_name,
    ad_product_number: row.ad_product_number,
    ad_specifications_models: row.ad_specifications_models,
    ad_unit: row.ad_unit,
    ad_typeofgoods: row.ad_typeofgoods,
    ad_fold_fold: row.ad_fold_fold,
    ad_quantity: row.ad_quantity,
    ad_receipt_unitprice: row.ad_receipt_unitprice,
    ad_money: (row.ad_quantity || 0) * (row.ad_receipt_unitprice || 0),
    ad_remark: row.ad_remark,
    ka_number: this.orderNumber
  };

  return $http.post("api/Syskcallotdetail/Add", postData)
    .then(res => {
      return res;
    })
    .catch(error => {
      console.error('添加失败:', error);
      throw new Error('添加失败');
    });
});

Promise.all(promises)
  .then(results => {
    const isSuccess = results.every(res => res);
    if (isSuccess) {
      this.$message({
        message: '添加成功！',
        type: 'success'
      });
    } else {
      this.$message({
        message: '添加失败！',
        type: 'error'
      });
    }
  })
  .catch(() => {
    this.$message.error('添加失败，请稍后重试！');
  });
},

      handleSelectionChange(selection) {
    this.selectedRows = selection;
  },
      hpForm(){//货品确认
        const selectedRows = this.$refs.tableName.selection; // 获取所有选中的行数据
    // 检查是否至少选择了一行
    if (selectedRows.length > 0) {
      // 遍历选中的每一行数据
      selectedRows.forEach(row => {
        // 将选中行数据添加到显示数据数组中
        this.dbmxdata.push({
          ad_adid: this.dbmxdata.length + 1, // 序号为当前数组长度加1
          ad_product_name: row.i_IProductName,
          ad_product_number: row.i_IProductCode,
          ad_specifications_models: row.i_IModel,
          ad_unit: row.i_IUnit,
          ad_typeofgoods: row.i_IProductType,
          ad_fold_fold: row.i_IQuantity,
          ad_quantity:null,
          ad_receipt_unitprice:row.i_IUnitPrice,
          ad_money:null,
          ad_remark:null,
        });
      });
      
      // 关闭弹窗
      this.tjhp = false;
    } else {
      // 提示用户至少选择一行数据
      this.$message.warning('请至少选择一行数据！');
    }
      },
       //入库明细查询
    HoupQu(){
      $http.get('api/Inventorydetails/Qu',{              
          }).then((response)=>{
             this.rkdata=response;
          }).catch((error)=>{
             console.log(error);
          })
    },
       MxAdd(){//货品添加
        this.tjhp=true;
        this.HoupQu();
       },
       cancel(){//取消
 this.dbmxdata = []; // 清空显示数据数组
      this.dbxz = false; // 关闭弹窗
      },
      handleAdd(){//调拨添加
            this.dbxz=true;
            this.Ckqu();
      },
       //仓库名称的下拉框
       Ckqu(){
        $http.get('api/Warehouse/Wqu',{              
            }).then((response)=>{
               this.Cklsit=response;
              
            }).catch((error)=>{
               console.log(error);
              
            })
       },
      //日期转换
      filterTime(date) {
if (date) {
  return date.split('T')[0];
} else {
  return '';
}
},
beforeUpload(file) {
    const isImage = file.type.includes('image');
    if (!isImage) {
      this.$message.error('只能上传图片文件');
    }
    const isLt200M = file.size / 1024 / 1024 < 200;
    if (!isLt200M) {
      this.$message.error('上传文件大小不能超过200MB');
    }
    return isImage && isLt200M;
  },
   // 获取动态的上传URL
   getUploadUrl() {
    // 构建上传URL，并将this.AddForm.jindex的值添加到URL中
    return `http://localhost:5084/api/PublicAttachment/Upload?num=${this.AddForm.xindex}`;
  },
  handlePreview(file) {
const reader = new FileReader();
reader.onload = (e) => {
  const imageUrl = e.target.result;
  // 在这里可以使用 imageUrl 来显示预览图片
  // 例如，将 imageUrl 设置为 img 标签的 src 属性
  // 或者在模态框中显示预览图片
  console.log('预览图片:', imageUrl);
};
reader.readAsDataURL(file.raw);
},
handleRemove(file) {
const index = this.fileList.indexOf(file);
if (index !== -1) {
  this.fileList.splice(index, 1);
  // 在这里可以向服务器发送请求，删除对应的文件
  console.log('删除文件:', file.name);
}
},
handleTotalRecords(){
        if (this.totalRecords === 1) {  
        this.totalPages = 2; 
      } else {  
        this.totalPages = (this.pageSize * this.currentPage) + (this.totalRecords % this.pageSize === 0 ? 0 : this.totalRecords % this.pageSize) - 1;  
      }  
      // 根据需要执行其他逻辑  
    
      },
//重置
chongzhi(){
      this.formInline.Number='';
      this.formInline.Status='';
      this.formInline.date='';
      this.formInline.date1='';
    },
    searchData() {//分页模糊查询
        // 查询数据逻辑
  const { Number, Status, date,date1 } = this.formInline;
  $http.get('api/Syskcallot/Fye', {
    params: {
      pageSize: this.pageSize,
      currentPage: this.currentPage,
      Number: Number,
      Status: Status,
      date: date,
      date1:date1
    }
  }).then((response) => {
    this.data = response;
   
    this.handleTotalRecords();
  }).catch((error) => {
    console.log(error);
  });
      // 查询逻辑
    },
     //查询总行数
     Qu(){
      $http.get('api/Syskcallot/Qu', {
  }).then((response) => {
    this.rows = response.length;
  
  }).catch((error) => {
    console.log(error);
  });
     },
   // 处理页码变化
   handleSizeChange: function (size) {
  this.pageSize = size;
  this.searchData();
  },
    handleCurrentChange: function (page) {
  this.currentPage = page;
  this.searchData();
},


    },
    mounted: function () {
   this.searchData();
   this.Qu();
},
computed: {
  totalQuantity() {
    // 计算调拨数量的总和
    return this.dbmxdata.reduce((total, item) => total + (parseFloat(item.ad_quantity) || 0), 0);
   
  },
  concatenatedProductNames() {
    return this.dbmxdata
      .map(item => `${item.ad_product_name}`) // 将每个货品名称转换为所需格式
      .join('，'); // 使用逗号拼接所有转换后的货品名称
  },
  totalAmount() {
    // 计算金额的总和
    return this.dbmxdata.reduce((total, item) => total + ((item.ad_quantity || 0) * (item.ad_receipt_unitprice || 0)), 0);
  },
},
}
</script>

<style scoped>

</style>